<template>
  <div class="message">
    <yd-cell-group>
      <yd-cell-item arrow>
          <span slot="left">所在地区：</span>
          <input slot="right" type="text" @click.stop="show = true" v-model="model" readonly placeholder="请选择收货地址">
      </yd-cell-item>
    </yd-cell-group>
    <yd-cityselect v-model="show" :callback="result" :items="district"></yd-cityselect>
    <div class="scroll">
      <yd-scrolltab>
        <yd-scrolltab-panel label="空调" icon="demo-icons-category1">
          <div style="height: 350px;background-color: gray;"></div>
        </yd-scrolltab-panel>
        <yd-scrolltab-panel label="冰箱" icon="demo-icons-category2" active>
          <div style="height: 350px;background-color: blue;"></div>
        </yd-scrolltab-panel>
        <yd-scrolltab-panel label="洗衣机" icon="demo-icons-category3">
          <div style="height: 350px;background-color: yellow;"></div>
        </yd-scrolltab-panel>
      </yd-scrolltab>
    </div>
  </div>
</template>

<script type="text/babel">
/* 前提是已经安装了 ydui-district */
import District from 'ydui-district/dist/jd_province_city_area_id'
export default {
  data () {
    return {
      show: false,
      model: '',
      district: District
    }
  },
  methods: {
    result (ret) {
      console.log(ret)
      this.model = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3
    }
  }
}
</script>

<style lang="scss">
  .message{
    .scroll{
      .yd-scrolltab{
        top: 1rem;
        bottom: 1rem;
      }
    }
  }
</style>
